<template>
  <div class="contenner">
    <el-scrollbar class="scrollbar">
      <div class="step_box" :style="{ transform: `translateX(-${translateX}px)` }">
        <div v-for="(item, index) in businessData.stage_list" class="step" :key="item.stage_id">
          <template v-if="index > current">
            <div :class="index == setpLengt ? 'num_last' : 'num'">
              {{ index + 1 }}
            </div>
            <div class="title">{{ item.name }}</div>
          </template>
          <template v-if="index == current && props.businessData.stage_state != 2">
            <div :class="index == setpLengt ? 'num_current_last' : 'num_current'">
              {{ index + 1 }}
            </div>
            <div class="title">{{ item.name }}</div>
          </template>
          <template v-if="index < current || (current == index && props.businessData.stage_state == 2)">
            <div :class="index == setpLengt ? 'num_active_last' : 'num_active'">
              <el-icon class="check_icon"><Select /></el-icon>
            </div>
            <div class="title_active">{{ item.name }}</div>
          </template>
          <div class="desc">赢率{{ item.win_rate }}%</div>
        </div>
      </div>
    </el-scrollbar>
    <div class="right">
      <el-dropdown v-if="props.businessData.operate_prem == 1 && props.businessData.stage_state == 2" @command="handleCommand">
        <el-button>
          变更阶段
          <el-icon class="el-icon--right"><arrow-down /> </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item v-for="item in stage_list" :key="item.stage_id" :command="item" :disabled="item.stage_id == stage_id">{{ item.name }}</el-dropdown-item> -->
            <el-dropdown-item v-for="item in businessData.stage_list" :key="item.stage_id" :command="item">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { businessStage } from '@/api/salesleads/salesmanagement/business'
  import { ElMessage } from 'element-plus'
  import { ref, withDefaults, defineProps, computed } from 'vue'
  interface Props {
    businessData: any
  }
  const translateX = ref(100)
  const props = withDefaults(defineProps<Props>(), {
    businessData: () => {
      return {
        stage_list: [],
        stage_id: '',
        business_id: '',
        stage_state: 0,
        operate_prem: 0,
        state: 0
      }
    }
  })
  const emit = defineEmits(['submit'])
  const setpLengt = ref(0)
  const current = computed(() => {
    // return props.businessData.stage_list.findIndex((item: any) => item.stage_id == props.businessData.stage_id) === -1 && 100
    setpLengt.value = props.businessData.stage_list.length - 1
    translateX.value = 100 - props.businessData.stage_list[0]?.name?.length * 8
    return props.businessData.stage_list?.findIndex((item: any) => item.stage_id == props.businessData.stage_id)
  })
  const handleCommand = (command: any) => {
    console.log(command)
    businessStage({
      business_id: props.businessData.business_id, //商机ID
      state: command.setting_stage < 100 ? 1 : command.setting_stage == 100 ? 2 : 3, //类型1进行中 2赢单 3输单
      stage_id: command.stage_id, //商机流程阶段ID
      loss_id: '' //输单原因id
    }).then((res: any) => {
      ElMessage.success('变更阶段成功')
      emit('submit')
    })
  }
</script>

<style lang="scss" scoped>
  .contenner {
    padding: 0 24px;
    border: 1px solid #e4e7ed;
    background: #fff;
    display: flex;
    align-items: center;
    .scrollbar {
      flex: 1;
      padding: 14px 0;
    }
    .step_box {
      padding: 10px 0;
      display: flex;
      transform: translateX(-74px);
      .step {
        min-width: 200px;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;

        .num {
          width: 29px;
          height: 29px;
          line-height: 29px;
          text-align: center;
          border-radius: 50%;
          background: #eaeaea;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          &::after {
            content: '';
            width: 165px;
            border-bottom: 1px dashed #2222237d;
            position: absolute;
            top: 15px;
            left: 30px;
          }
        }
        .num_last {
          width: 29px;
          height: 29px;
          line-height: 29px;
          text-align: center;
          border-radius: 50%;
          background: #eaeaea;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .num_current {
          width: 29px;
          height: 29px;
          line-height: 29px;
          text-align: center;
          border-radius: 50%;
          background: #ff6b00;
          color: #fff;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          &::after {
            content: '';
            width: 165px;
            border-bottom: 1px dashed #2222237d;
            position: absolute;
            top: 15px;
            left: 30px;
          }
        }
        .num_current_last {
          width: 29px;
          height: 29px;
          line-height: 29px;
          text-align: center;
          border-radius: 50%;
          background: #ff6b00;
          color: #fff;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .num_active {
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          border-radius: 50%;
          background: #fcf0eb;
          color: #ff6b00;
          border: 2px solid #ff6b00;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          &::after {
            content: '';
            width: 165px;
            border-bottom: 1px dashed #ff6b00;
            position: absolute;
            top: 15px;
            left: 30px;
          }
          .check_icon {
            font-size: 18px;
          }
        }
        .num_active_last {
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          border-radius: 50%;
          background: #fcf0eb;
          color: #ff6b00;
          border: 2px solid #ff6b00;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          .check_icon {
            font-size: 18px;
          }
        }

        .title {
          color: #000000c9;
          font-weight: 500;
        }
        .title_active {
          font-weight: 500;
          color: #ff6b00;
        }
        .desc {
          font-size: 12px;
          color: #00000078;
        }
      }
    }
    .right {
      margin-left: 60px;
    }
  }
</style>
